<template>  
  <div class="system-equipInfo-edit">
    <el-dialog v-model="isShowDialog" width="800px" :close-on-click-modal="false" :destroy-on-close="true">
      <template #header>
        <div v-drag="['.system-equipInfo-edit .el-dialog', '.system-equipInfo-edit .el-dialog__header']">{{currentEquipData.equipName}}<span :style="{marginLeft:'10px'}"> <el-tag :type="getTagTypeByStatus(equipRealtimeData.equipRunStatus)">{{getEquipRunStatusZH(equipRealtimeData.equipRunStatus)}}</el-tag> </span></div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-statistic class="statistic-card" title="设备累计产量" :value="equipRealtimeData.equiptotaloutput" />
        </el-col>
        <el-col :span="8">
          <el-statistic class="statistic-card" title="今日产量" :value="equipRealtimeData.todayCount" />
        </el-col>
        <el-col :span="8">
          <el-statistic class="statistic-card" title="机器节拍" :value="equipRealtimeData.equipRate" />
        </el-col>
      </el-row>
      <el-row :gutter="20" :style="{marginTop:'20px'}">
        <el-col :span="12">
          <el-statistic class="statistic-card" title="温度(℃)" :value="equipRealtimeData.temperature" />
        </el-col>
        <el-col :span="12">
          <el-statistic class="statistic-card" title="湿度(%RH)" :value="equipRealtimeData.humidity" />
        </el-col>
      </el-row>
      <el-row :gutter="20" :style="{marginTop:'20px'}">
        <el-col :span="6">
          <el-statistic class="statistic-card" title="最高温度(℃)" :value="equipRealtimeData.maxtemperature" />
        </el-col>
        <el-col :span="6">
          <el-statistic class="statistic-card" title="最低温度(℃)" :value="equipRealtimeData.mintemperature" />
        </el-col>
        <el-col :span="6">
          <el-statistic class="statistic-card" title="最高湿度(%RH)" :value="equipRealtimeData.maxhumidity" />
        </el-col>
        <el-col :span="6">
          <el-statistic class="statistic-card" title="最低湿度(%RH)" :value="equipRealtimeData.minhumidity" />
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import {defineComponent, reactive, ref, toRefs,getCurrentInstance} from 'vue';
import {getEquipRealtimeData} from '/@/api/equip/index';

export default {
  name: 'equipRunDataDialog',
  setup() {
    const { proxy } = getCurrentInstance()
    const isShowDialog = ref(false);
    const currentEquipData = ref({});
    const equipRealtimeData = ref({});
    const openDialog = (rowData) => {
      currentEquipData.value = rowData;
      isShowDialog.value = true;
      fetchData()
    };
     // 字典选项数据        
     const {
      equip_run_status
    } = proxy.useDict('equip_run_status')

    const getEquipRunStatusZH = (status) => {
      if(status){
        return proxy.selectDictLabel(equip_run_status.value,status)
      } else {
        return '未知状态'
      }
    }

    const getTagTypeByStatus = (status) => {
      switch (status) {
        case 'init':
          return 'info';
        case 'run':
          return 'success';
        case 'stop':
          return 'info';
        case 'fault':
          return 'danger';
        case 'down':
          return 'info';
        default:
          return 'info';
      }
    }

    const fetchData = async () => {
      const {code,data={}} = await getEquipRealtimeData({
        customer_id: currentEquipData.value.customerId,
        equip_num: currentEquipData.value.equipNum,
      });
      if (code == 0) {
        equipRealtimeData.value = data
      }
      console.log(equipRealtimeData.value);
    };

    
    return {
      isShowDialog,
      openDialog,
      getEquipRunStatusZH,
      currentEquipData,
      equipRealtimeData,
      equip_run_status,
      getTagTypeByStatus
    };
  },
};
</script>
<style scoped lang="scss">
.system-equipInfo-edit {
  :deep(.el-dialog){
    height: 60vh;
  }
}
.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: rgba($color: #000000, $alpha: 0.1);
  :deep(.el-statistic__head){
    font-size: 14px;
  };
  :deep(.el-statistic__content){
    font-size: 32px;
  }
}
/* 定义动画 */
@keyframes textSizeChange {
    0% {
        font-size: 16px;
    }
    50% {
        font-size: 20px;
    }
    100% {
        font-size: 16px;
    }
}
/* 应用动画到文字 */
.animated-text {
    animation: textSizeChange 2s infinite;
}
</style>